<include file="public@header"/>
<style>
    ul, li {
        list-style: none;
        margin: 0;
        padding: 0;
    }

    .choose_goods {
        width: 100%;
        display: flex;
        flex-direction: row;
    }

    .goods_class {
        width: 8%;
        background: #fff;
        padding-top: 10px;
    }

    .goods_class ul {
        width: 100%;
        display: flex;
        flex-direction: column;
    }

    .goods_class ul span {
        padding: 0px 10px;
    }

    .goods_class ul .hover span {
        color: red;
        border-right: 5px solid red;
    }

    .goods_class ul li {
        line-height: 40px;
        cursor: pointer;
    }

    /*商品信息*/
    .goods_info {
        width: 62%;
        padding: 15px;
    }

    .goods_info ul, .goods_choose ul {
        border-radius: 8px;
        width: 98%;
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        background: #fff;
        padding: 15px;
    }

    .goods_info ul li {
        width: 25%;
        display: flex;
        flex-direction: column;
        line-height: 30px;
        align-items: center;
        justify-content: center;
        padding-bottom: 10px;
        cursor: pointer;
    }

    .goods_info ul li p, .goods_choose ul li p {
        margin: 0;
    }

    .goods_info ul li img {
        max-width: 85%;
        border-radius: 5px;
    }

    .goods_choose ul {
        flex-direction: column;
    }

    .goods_choose ul li {
        width: 100%;
        display: flex;
        flex-direction: row;
        line-height: 30px;
        align-items: center;
        justify-content: space-between;
        border-bottom: 1px solid #f2f2f2;
        padding: 8px 0;
    }

    .goods_name {
        width: 60%;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipse;
    }

    .goods_num {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
    }

    .goods_choose {
        width: 25%;
        padding: 15px;
    }

    .num_jian, .num_jia {
        font-size: 24px;
        height: 30px;
        width: 30px;
        text-align: center;
        border-radius: 50%;
        line-height: 25px;
        border-radius: 50%;
        background: #F7770D;
        border: 1px solid #F7770D;
        color: #fff;
        user-select: none;
        cursor: pointer;
    }

    .num_jian.none, .num_jia.none {
        background: #c2c2c2;
        border: 1px solid #C2C2C2;
    }

    .num {
        width: 30px;
        text-align: center;
        font-weight: 600;
        border: none;
    }

    .end_btn {
        user-select: none;
        width: 80%;
        background-image: linear-gradient(to right, #FB783B, #FE8E01);
        color: #fff;
        letter-spacing: 10px;
        height: 50px;
        text-align: center;
        margin: 0 auto;
        border-radius: 31px;
        line-height: 50px;
        cursor: pointer;
    }
</style>
</head>
<body>
<div class="wrap js-check-wrap">
    <ul class="nav nav-tabs">
        <li><a href="{:url('visua')}">{:lang('可视化墓区')}</a></li>
        <li><a href="{:url('sale')}?order_id={$order_id}">墓位信息</a></li>
        <li><a href="{:url('applyer')}?order_id={$order_id}">购墓人信息</a></li>
        <li class="active"><a href="">商品选购</a></li>
    </ul>
    <form class="form-horizontal js-ajax-form" action="{:url('')}" method="post">
        <input type="hidden" name="order_id" value="{$order_id}">
        <input type="hidden" name="customer_id" value="{$customer_id}">
        <input type="hidden" name="deceased_id" value="{$deceased_id}">
        <fieldset style="background:#f2f2f2;">
            <div class="choose_goods">
                <div class="goods_class">
                    <ul>
                        <foreach name="results_cate" item="cate">
                            <li data-cate_id="{$cate.id}"><span>{$cate.cate_name}</span></li>
                        </foreach>
                    </ul>
                </div>
                <div class="goods_info">
                    <ul id="goods_list">
                    </ul>
                </div>
                <div class="goods_choose">
                    <ul id="goods_js">
                        <foreach name="result" item="vo">
                            <li class="goods" id="goods_{$vo.goods_id}">
                                <div class="goods_name">
                                    <p>{$vo.goods_name}</p>
                                    <p style="color:red;line-height:20px">￥<span
                                            class="goods_price">{$vo.goods_price}</span></p>
                                </div>
                                <div class="goods_num">
                                    <p class="num_jian minus">-</p>
                                    <input type="hidden" name="goods[{$vo.goods_id}][dele_id]" value="">
                                    <input type="hidden" name="goods[{$vo.goods_id}][id]" value="{$vo.id}">
                                    <input type="hidden" name="goods[{$vo.goods_id}][goods_id]" value="{$vo.goods_id}">
                                    <input type="hidden" name="goods[{$vo.goods_id}][goods_name]"
                                           value="{$vo.goods_name}">
                                    <input type="hidden" name="goods[{$vo.goods_id}][cate_name]"
                                           value="{$vo.cate_name}">
                                    <input type="hidden" name="goods[{$vo.goods_id}][goods_price]" class="goods_price"
                                           value="{$vo.goods_price}">
                                    <input class="num" name="goods[{$vo.goods_id}][num]" id="num_{$vo.goods_id}"
                                           value="{$vo.num}">
                                    <p class="num_jia plus">+</p>
                                </div>
                            </li>
                        </foreach>
                        <li id="goods_pt" style="align-items: flex-end;;flex-direction: column; border:none;">
                            <p style="font-size:16px" id="heji">合计：<span class="totalNum">0</span></p>
                            <p style="color:red;" id="youhui">优惠：<span class="discountPrice">0</span></p>
                            <p style="font-size:18px; font-weight:600;color:red;" id="shifu">实付：<span
                                    class="totalPrice">0</span></p>
                        </li>
                        <li style="border:none;">
                            <div class="end_btn">结账</div>
                        </li>
                        <li style="border:none;">
                            <a class="btn btn-default"
                               href="{:url('orders/signContract')}?customer_id={$customer_id}&order_id={$order_id}"
                               style="user-select: none;width: 80%; border-radius: 31px;margin: 0 auto;font-size: 18px;color: #000;">跳过</a>
                        </li>
                    </ul>
                </div>
            </div>

        </fieldset>
    </form>
</div>
<script type="text/javascript" src="__STATIC__/js/admin.js?v={:time()}"></script>

<script type="text/javascript">
    $(function () {
        var num_count = 0;
        $("#goods_js .goods").each(function (i, n) {
            var goods_price = ($('#' + this.id).find('.goods_num').find('.goods_price').val()),
                num = ($('#' + this.id).find('.goods_num').find('.num').val());
            console.log(goods_price * num)
            num_count += goods_price * num;
        });
        $(".totalNum").text(num_count.toFixed(2));
        $(".totalPrice").text(num_count.toFixed(2));
    })
    var img_url = '/upload/';
    //切换分类
    $('.goods_class ul li').click(function () {
        var index = $(".goods_class ul li").index(this), cate_id = $(this).attr('data-cate_id');
        $('.goods_class ul li').eq(index).addClass("hover").siblings().removeClass("hover");
        //ajax请求去获取对应分类的信息
        $.ajax({
            url: "{:url('ajax_goods')}",
            type: "post",
            dataType: "json",
            data: {'cate_id': cate_id, 'type': 2, 'Ajax': 1},
            success: function (result) {
                if (result.data.length == 0) {
                    $("#goods_list").html('');
                    return;
                }
                $("#goods_list").html('');
                var html = "";
                $.each(result.data, function (i, n) {
                    html += '<li class="add_info" goods_id ="' + n.id + '" goods_name="' + n.goods_name + '" goods_price="' + n.price + '" goods_stock="' + n.stock + '"cate_name="' + n.cate_name + '" ><img src="' + img_url + n.photos_url + '"><p>' + n.goods_name + '</p>\n' +
                        '  <p style="color:red;line-height:20px">￥' + n.price + '</p></li>'
                })
                $("#goods_list").html(html);
            }
        })
    })

    $('#goods_list').on('click', '.add_info', function () {
        var goods_id = $(this).attr('goods_id'),
            goods_name = $(this).attr('goods_name'),
            goods_stock = $(this).attr('goods_stock'),
            cate_name = $(this).attr('cate_name'),
            goods_price = $(this).attr('goods_price');
        if (goods_stock != 0) {
            $(this).attr('goods_stock', parseInt(goods_stock) - 1);
            var num = $('#goods_js').find('#num_' + goods_id).val();
            var totalNum = $(".totalNum").text()
            var discountPrice = $(".discountPrice").text()
            if (num) {

                var receivable_price = Number(Number(totalNum.replace(/,/g, "")).toFixed(2) * 1 +
                    Number(goods_price.replace(/,/g, "")).toFixed(2) * 1);

                var count_totalPrice = Number(Number(totalNum.replace(/,/g, "")).toFixed(2) * 1 +
                    Number(goods_price.replace(/,/g, "")).toFixed(2) * 1 -
                    Number(discountPrice.replace(/,/g, "")).toFixed(2) * 1);

                $('#goods_js').find('#num_' + goods_id).val(parseInt(num) + 1)
                $(".totalNum").text(receivable_price);
                $(".totalPrice").text(count_totalPrice);


                $("#goods_js").find('.num_jian').removeClass("none");
            } else {
                $('#goods_pt').before('<li id="goods_' + goods_id + '" data-stock="' + goods_stock + '"><div class="goods_name"><p>' + goods_name + '</p>' +
                    ' <p style="color:red;line-height:20px">￥<span class="goods_price">' + goods_price + '</span>' +
                    '  </p></div><div class="goods_num"><p class="num_jian minus " >-</p>\n' +
                    '       <input type="hidden" name="goods[' + goods_id + '][dele_id]" >\n' +
                    '       <input type="hidden" name="goods[' + goods_id + '][id]" >\n' +
                    '       <input type="hidden" name="goods[' + goods_id + '][goods_id]"   value="' + goods_id + '">\n' +
                    '       <input type="hidden" name="goods[' + goods_id + '][goods_name]"   value="' + goods_name + '">\n' +
                    '       <input type="hidden" name="goods[' + goods_id + '][cate_name]"   value="' + cate_name + '">\n' +
                    '       <input type="hidden" name="goods[' + goods_id + '][goods_price]"   value="' + goods_price + '">\n' +
                    '       <input class="num" name="goods[' + goods_id + '][num]" id="num_' + goods_id + '" value="1"><p  class="num_jia plus" >+</p>\n' +
                    '</div></li>');
            }
            //计算总价

            var receivable_price = Number(Number(totalNum.replace(/,/g, "")).toFixed(2) * 1 +
                Number(goods_price.replace(/,/g, "")).toFixed(2) * 1);

            var count_totalPrice = Number(Number(totalNum.replace(/,/g, "")).toFixed(2) * 1 +
                Number(goods_price.replace(/,/g, "")).toFixed(2) * 1 -
                Number(discountPrice.replace(/,/g, "")).toFixed(2) * 1);

            $(".totalNum").text(receivable_price.toFixed(2));
            $(".totalPrice").text(count_totalPrice.toFixed(2));
            $("#goods_js").find('.num_jian').removeClass("none");
        } else {
            layer.msg('库存不足！', {icon: 3});
        }

    })
    //加
    $('#goods_js').on('click', '.plus', function () {
        var num = $(this).parent().find('.num');
        //单品数量增加
        num.val(parseInt(num.val()) + 1);
        //计算总价
        var goods_price = ($(this).parent().parent().find(".goods_price").text());

        var receivable_price = Number(Number($(".totalNum").text().replace(/,/g, "")).toFixed(2) * 1 +
            Number(goods_price.replace(/,/g, "")).toFixed(2) * 1);
        $(".totalNum").text(receivable_price.toFixed(2));
        var count_totalPrice = Number(Number($(".totalNum").text().replace(/,/g, "")).toFixed(2) * 1 -
            Number($(".discountPrice").text().replace(/,/g, "")).toFixed(2) * 1);

        $(".totalPrice").text(count_totalPrice.toFixed(2));
        $(this).parent().find('.num_jian').removeClass("none");
    });

    //减
    $('#goods_js').on('click', '.minus', function () {
        var num = $(this).parent().find('.num');
        var num_num = parseInt(num.val())
        console.log(num_num)
        if (num_num <= 1) {
            // num.val(0);
            $(this).addClass("none");
            console.log(num_num)
            if (num_num == 1) {
                num.val(0);
                var goods_price = $(this).parent().parent().find(".goods_price").text();

                console.log(goods_price.replace(/,/g, ""))
                console.log('///')
                var receivable_price = Number(Number($(".totalNum").text().replace(/,/g, "")).toFixed(2) * 1 -
                    goods_price.replace(/,/g, ""));

                $(".totalNum").text(receivable_price.toFixed(2));
                var count_totalPrice = Number(Number($(".totalNum").text().replace(/,/g, "")).toFixed(2) * 1 -
                    Number($(".discountPrice").text().replace(/,/g, "")).toFixed(2) * 1);
                console.log('---')
                console.log(goods_price)
                console.log(count_totalPrice)

                $(".totalPrice").text(count_totalPrice.toFixed(2));
                $(this).parent().parent().find(".goods_price").text();

                $(this).parent().find('input').eq(0).val($(this).parent().find('input').eq(1).val());
                var inputeq = $(this).parent().find('input').eq(1).val();
                console.log(inputeq)
                $(this).parent().parent().css('display', 'none');
            }
        } else {
            if ($(this).hasClass("none")) {
                $(this).removeClass("none");
            }
            num.val(parseInt(num.val()) - 1);
            var goods_price = parseInt($(this).parent().parent().find(".goods_price").text());
            var receivable_price = Number(Number($(".totalNum").text().replace(/,/g, "")).toFixed(2) * 1 -
                goods_price.toFixed(2));
            $(".totalNum").text(receivable_price.toFixed(2));
            var count_totalPrice = Number(Number($(".totalNum").text().replace(/,/g, "")).toFixed(2) * 1 -
                Number($(".discountPrice").text().replace(/,/g, "")).toFixed(2) * 1);
            $(".totalPrice").text(count_totalPrice.toFixed(2));
        }
    });

    // 提交订单
    $(".end_btn").click(function () {
        console.log($("form").serialize())
        $.post($("form").attr('action'), $("form").serialize(), function (result) {
            if (result.code == 1) {
                window.location.href = result.url;
                $('#js-dialog-close').click();
            } else {
                alert(result.msg);
            }
        }, 'json');
    });

</script>

</body>
</html>